import React, { useRef, useState } from "react";
import { View, Text, Input, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { AtAccordion, AtButton, AtForm, AtInput, AtList, AtListItem } from "taro-ui";
import YdkDate from '@/utils/date'

const DateScreen: Taro.FC = () => {

  const [state, setState] = useState({})
  const [indexs, setIndexs] = useState({}) 
  const ydkDate = useRef(new YdkDate())

  function testFormate(key: string) {

    // 获取时完整的日期
    const date1 = YdkDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
    // 获取年月日
    const date2 = YdkDate.format(new Date(), 'yyyy-MM-dd')
    // 获取年月
    const date3 = YdkDate.format(new Date(), 'yyyy-MM')
    // 通过时间戳获取年月日
    const date4 = YdkDate.format(Date.now(), 'yyyy-MM-dd')

    const results = {
      formateDate1: date1,
      formateDate2: date2,
      formateDate3: date3,
      formateDate4: date4,
    }

    const resultKeys = {
      ['formateDate1']: 'yyyy-MM-dd hh:mm:ss',
      ['formateDate2']: 'yyyy-MM-dd',
      ['formateDate3']: 'yyyy-MM',
      ['formateDate4']: 'yyyy-MM-dd',
    };

    return {
      input: 'new Date(),' + resultKeys[key],
      result: results[key]
    }

  }

  function testWeekday() {
    // 传入的必须为Date 对象
    const weekday = YdkDate.parseWeekday(new Date())
    return {
      input: 'new Date()',
      result: weekday
    }
  }

  function testZeroize(k, v) {
    // 前面补上0
    const z = YdkDate.zeroize(v)
    return {
      input: v,
      result: z
    }
  }

  function testParse(k) {
    // 获取时间戳
    const date1 = YdkDate.format(new Date(), 'yyyy-MM-dd')
    const result = YdkDate.parse(date1)
    return {
      input: date1,
      result
    }
  }

  function testParseAge(k, value) {
    // 计算年龄
    const date1 = YdkDate.format(new Date(value), 'yyyy-MM-dd')

    const result = YdkDate.parseAge(date1)

    return {
      input: date1,
      result
    }
  }

  function testTimeDiff(k) {
    // 第一个参数时间差， 第二个是数组
    const time = new Date().getTime()
    const preTime = new Date().getTime() - 1000 * 60 * 24
    const date = YdkDate.parseTimeDiff(preTime, time)
    return {
      input: preTime,
      result: JSON.stringify(date)
    }
  }

  function testPublishTime(k) {
    const date1 = YdkDate.format(new Date(), 'yyyy-MM-dd')
    const publishTime = YdkDate.publish(date1)
    return {
      input: date1,
      result: publishTime
    }
  }

  function testTransformTime(k) {
    // 第一个参数时间差， 第二个是数组
    const current = new Date().getTime()
    const preTime = new Date().getTime() - 1000 * 60 * 24 * 7
    let input: number | string = ''
    let result = ''
    if (k === 'TransformTime1') {
      // 展示时分秒
      input = preTime
      result = YdkDate.publishLately(input, true)
    } else {
      input = YdkDate.format(new Date('2021-01-01'), 'yyyy-MM-dd')
      // 不展示时分秒
      result = YdkDate.publishLately(input, false)
    }
    return {
      input,
      result
    }
  }



  function testCorrect() {
     let input = Date.now();
     let result = YdkDate.correct(Date.now())
    
    return {
      input,
      result
    }
  }

  function testCountDown(k: string) {
    let start = new Date().getTime() - 50000000;
    let end = new Date()
    ydkDate.current.stopCountdown()
    ydkDate.current.countdown(new Date().getTime() - 50000000, new Date(), (value) => {
       setState((pre) => {
          return {
            ...pre,
            [k]: {
              input: start +',Date',
              result: JSON.stringify(value)
            }
          }
       })
    })
    return {}
 }


  const List = [
    {
      label: 'formate-获取完整的日期',
      key: 'formateDate1',
      role: 'format',
      fn: testFormate
    },
    {
      label: 'formate-获取年月日',
      key: 'formateDate2',
      role: 'format',
      fn: testFormate
    },
    {
      label: 'format-获取年月',
      key: 'formateDate3',
      role: 'format',
      fn: testFormate
    },
    {
      label: '获取时间戳',
      key: 'testGetDateTimeStamp',
      role: 'util',
      fn: testParse
    },
    {
      label: '获取星期',
      key: 'Weekday',
      role: 'util',
      fn: testWeekday
    },
    {
      label: '时间前面补上0',
      key: 'Zeroize',
      value: 1,
      role: 'util',
      fn: testZeroize
    },
    {
      label: '转换时间(包含业务逻辑-发布时间)时分秒',
      key: 'TransformTime1',
      role: 'business',
      fn: testTransformTime
    },
    {
      label: '转换时间(包含业务逻辑-发布时间)',
      key: 'TransformTime2',
      role: 'business',
      fn: testTransformTime
    },
    {
      label: '转换年龄',
      key: 'testParseAge',
      value: '1990-01-01',
      role: 'business',
      fn: testParseAge
    },
    {
      label: '倒计时(获取距离的时间)',
      key: 'testTimeDiff',
      role: 'util',
      fn: testTimeDiff
    },
    {
      label: '倒计时',
      key: 'countdown',
      role: 'util',
      fn: testCountDown
    },
    {
      label: '发布时间',
      key: 'testPublishTime',
      fn: testPublishTime,
      role: 'business',
    },
    {
      label: '转换时间为月日分秒',
      key: 'correct',
      fn: testCorrect,
      role: 'business',
    },
    {
      label: '计算18年前',
      key: 'calcYear',
      role: 'business',
      fn: function () {
        const input = ''
        const result = YdkDate.get18Year()
        return {
          input,
          result
        }
      }
    }
  ]


  const cates = [{
      title: 'format',
      list: List.filter(item => item.role === 'format')
      }, {
        title: '业务方法',
        list: List.filter(item => item.role === 'business')
    },
    {
      title: 'util',
      list: List.filter(item => item.role === 'util')
  }
  ];

  const renderList = function(item, index) {
    const { title, path } = item || ({} as any);
    return (
      <View className="panel">
        <View className="panel__title"><Text>{item.label}</Text></View>
        <AtInput
          name={item.key}
          title='输入参数'
          type='text'
          placeholder={state[item.key]?.input}
          value={state[item.key]?.input}
          disabled
          onChange={() => { }}
        />
         <AtInput
          name={item.key}
          title='结果'
          type='text'
          placeholder={state[item.key]?.result}
          value={state[item.key]?.result}
          disabled
          onChange={() => { }}
        />
        <AtButton size="small" type="primary" onClick={() => {
          const { input, result } = item.fn(item.key, item.value)
          setState({
            ...state,
            [item.key]: {
              result,
              input
            }
          })
        }}>开始转换</AtButton>  
      </View>)
  }

  return (
    <View className="doc-body" style={{
      backgroundColor: '#e8e8e8'
    }}>
      {
        cates.map((item, index) => {
            return (
              <AtAccordion isAnimation 
                title={item.title}
                open={indexs[item.title]} onClick={() => {
                  setIndexs((pre) => {
                    return {
                      ...pre,
                      [item.title]: !pre[item?.title]
                    }
                  })
              }}>
                {item.list.map(renderList)}
              </AtAccordion>
            )
        })
      }
    </View>
  )
};

export default DateScreen;